<template>
	<view class="festival_bg">
		<view class="days_logo">
			Author Fantasy
		</view>
		<view class="current_time">
			<view class="year_month_day_week">
				<view class="year_month_day">
					{{ymdString}}
				</view>
				<view class="week">
					{{week}}
				</view>
			</view>
			<view class="hour_minute_second">
				{{hmsString}}
			</view>
		</view>

		<!-- 显示还有几天 -->
		<view class="diff_show_area">
			<view class="show_per" v-for="(item,index) in staticFestivals" :key="index"
				@longpress="longTap(item,index)">
				<view class="left_title">
					{{item.title}}
				</view>
				<view class="right_day">
					{{item.diff}}
				</view>
			</view>
		</view>

		<!-- 自己填日期 -->
		<view class="self">
			<view class="title">
				<button @click="addEvent">
					<uni-icons type="plusempty" color="#07fbff"></uni-icons>
					<text>添加纪念日或倒数日</text>
				</button>
			</view>
		</view>

		<!-- 抽屉 -->
		<uni-drawer ref="showLeft" mode="left" width="300">
			<view class="drawer_title">
				新增倒数日或纪念日
			</view>
			<view class="drawer_form">
				<uni-segmented-control :current="currentIndex" :values="selects" @clickItem="onClickItem"
					styleType="button" activeColor="#45c65a">
				</uni-segmented-control>
				<view class="content">
					<view class="jinain_day" v-show="currentIndex === 0">
						<uni-easyinput trim="true" prefixIcon="navigate-filled" v-model="memoryDayNameValue"
							placeholder="请输入纪念日名称"></uni-easyinput>
						<view class="picker">
							<uni-datetime-picker type="date" :value="memoryDayDate" @change="changeDatePicker" />
						</view>
						<view class="btn_memory">
							<button @click="addMemoryDate">添加</button>
						</view>
					</view>
					<view class="daoshu_day" v-show="currentIndex === 1">
						<uni-easyinput trim="true" prefixIcon="navigate-filled" v-model="daoshuDayNameValue"
							placeholder="请输入倒数日名称"></uni-easyinput>
						<view class="picker">
							<uni-datetime-picker type="date" :value="daoshuDayDate" @change="changeDatePicker" />
						</view>
						<view class="btn_daoshu">
							<button @click="addDaoshuDay">添加</button>
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>

	</view>
</template>

<script>
	import {
		dateToString,
		formatDate,
		dateToWeek,
		getDiffYmdBetweenDate
	} from '../../static/js/dateUtil.js';
	export default {
		data() {
			return {
				ymdString: '', // 年月日：例如：2023年01月21日
				week: '', // 周几
				hmsString: '', // 时分秒：例如：12:03:30
				chuxiFestival: '2023-01-21', // 除夕数组，从2023年开始
				springFestivals: '2023-01-22', // 春节数组，从2023年开始
				currentYeardiff: '', // 今年已经多少天了
				staticFestivals: [{
						date: '2023-01-21',
						title: '除夕还有',
						diff: '',
					},
					{
						date: '2023-01-22',
						title: '春节还有',
						diff: '',
					},
					{
						date: dateToString(new Date()).substring(0, 4) + '-01-01',
						title: '今年已经过去',
						diff: '',
					}
				],
				selects: ['纪念日', '倒数日'],
				currentIndex: 0, // 分段器的索引
				memoryDayNameValue: '', // 纪念日名称 
				memoryDayDate: '', // 纪念日日期 (默认值：当前日期)
				daoshuDayNameValue: '', // 倒数日名称
				daoshuDayDate: '', // 倒数日日期
			}
		},

		onLoad() {
			// 实时获取当前时间的年月日，时分秒，周几
			let timer = setInterval(() => {
				this.getcurrentTimeAndWeek()
			}, 1000);
			// 离开当前页面时销毁定时器
			this.$once('hook:beforeDestroy', () => {
				clearInterval(timer);
				timer = null;
			})
			// 计算春节，除夕和今年已经过去多少天了
			this.calculateDay();
			// 加载分享菜单
			this.loadingShareMenu();
		},

		methods: {
			// 获取当前时间的年月日，时分秒，周几
			getcurrentTimeAndWeek() {
				var curDate = new Date();
				var timeString = formatDate(curDate); // 2023-01-01 12:08:12
				this.ymdString = timeString.substring(0, 4) + '年' + timeString.substring(5, 7) + '月' + timeString
					.substring(8, 10) + '日'
				this.week = dateToWeek(curDate);
				this.hmsString = timeString.substring(11);
			},
			// 计算春节，除夕和今年已经过去多少天了
			calculateDay() {
				// 当前时间
				var current = new Date();
				if (uni.getStorageSync('staticFestivals')) {
					this.staticFestivals = uni.getStorageSync('staticFestivals');
				}
				this.staticFestivals.forEach(item => {
					item.diff = getDiffYmdBetweenDate(item.date, dateToString(current));
				})
				uni.setStorageSync('staticFestivals', this.staticFestivals);
			},
			// 点击添加，添加表单弹出
			addEvent() {
				this.$refs.showLeft.open();
			},
			// 点击抽屉里的分段器，选择是纪念日还是倒数日
			onClickItem(e) {
				if (this.currentIndex != e.currentIndex) {
					this.currentIndex = e.currentIndex;
				}
			},
			// 日期选择器改变
			changeDatePicker(e) {
				this.memoryDayDate = e;
				console.log(e);
				if (this.currentIndex === 0) {
					this.memoryDayDate = e
				} else if (this.currentIndex === 1) {
					this.daoshuDayDate = e
				}
			},
			// 点击添加纪念日
			addMemoryDate() {
				if (this.memoryDayNameValue.trim() === '') {
					uni.showToast({
						title: '请输入纪念日名称',
						icon: 'none',
						duration: 1000,
					})
				} else if (this.memoryDayDate === '') {
					uni.showToast({
						title: '请选择纪念日期',
						icon: 'error',
						duration: 1000,
					})
				} else {
					if (this.memoryDayNameValue.length > 10) {
						uni.showToast({
							title: '纪念日名称过长',
							icon: 'error',
							duration: 1000,
						})
					} else {
						if (new Date(this.memoryDayDate.toString()) > new Date()) {
							uni.showToast({
								title: '纪念日不可大于现在日期',
								icon: 'none',
								duration: 1000,
							})
						} else {
							this.staticFestivals.push({
								title: this.memoryDayNameValue + '已经',
								diff: getDiffYmdBetweenDate(dateToString(new Date()), this.memoryDayDate)
							})
							uni.setStorageSync('staticFestivals', this.staticFestivals);
							uni.showToast({
								title: '添加成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								this.$refs.showLeft.close();
							}, 1000)
						}
					}
				}
			},
			// 点击添加倒数日
			addDaoshuDay() {
				if (this.daoshuDayNameValue.trim() === '') {
					uni.showToast({
						title: '请输入倒数日名称',
						icon: 'none',
						duration: 1000,
					})
				} else if (this.daoshuDayDate === '') {
					uni.showToast({
						title: '请选择倒数日期',
						icon: 'error',
						duration: 1000,
					})
				} else {
					if (this.daoshuDayNameValue.length > 10) {
						uni.showToast({
							title: '名称过长',
							icon: 'error',
							duration: 1000,
						})
					} else {
						if (new Date(this.daoshuDayDate.toString()) < new Date()) {
							uni.showToast({
								title: '倒数日不可小于现在日期',
								icon: 'none',
								duration: 1000,
							})
						} else {
							this.staticFestivals.push({
								title: this.daoshuDayNameValue + '还有',
								diff: getDiffYmdBetweenDate(dateToString(new Date()), this.daoshuDayDate)
							})
							uni.setStorageSync('staticFestivals', this.staticFestivals);
							uni.showToast({
								title: '添加成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								this.$refs.showLeft.close();
							}, 1000)
						}
					}
				}
			},
			// 长按弹出删除
			longTap(item, index) {
				const _this = this;
				uni.showModal({ // 弹框询问是否进行下一步事件
					title: '提示',
					content: '是否删除该事件',
					success: function(res) {
						if (res.confirm) {
							_this.staticFestivals.splice(index, 1);
							uni.setStorageSync('staticFestivals', _this.staticFestivals);
							uni.showToast({
								title: '删除成功',
								icon: 'success',
								duration: 700,
							})
						} else if (res.cancel) {
							return
						}
					}
				});
			},
			
			// 加载分享菜单
			loadingShareMenu() {
				wx.showShareMenu({
					withShareTicket: true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.festival_bg {
		width: 100%;
		min-height: 100vh;
		background-color: #f0f0f0;

		.days_logo {
			font-size: 30px;
			color: #d4d4d9;
			width: 100%;
			text-align: center;
			padding-top: 10px;
		}

		.current_time {
			width: 100%;
			text-align: center;
			margin-top: 15px;
			margin-left: auto;
			margin-right: auto;

			.year_month_day_week {
				display: flex;
				justify-content: space-evenly;
				width: 80%;
				margin-left: auto;
				margin-right: auto;
				font-size: 20px;
				color: #8282c3;

				.year_month_day {
					width: 60%;
				}

				.week {
					width: 20%;
				}
			}

			.hour_minute_second {
				width: 70%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 10px;
				text-align: center;
				padding-top: 5px;
				padding-bottom: 5px;
				font-size: 40px;
				font-weight: 600;
				letter-spacing: 3px;
				color: #f3f3f7;
				background-color: #424242;
				border-radius: 8px;
				box-shadow: 3px 3px 3px 3px #2c2c2c;
			}
		}

		.diff_show_area {
			width: 85%;
			border-radius: 8px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;

			.show_per {
				width: 100%;
				display: flex;
				justify-content: space-between;
				background-color: #ffffff;
				margin-top: 10px;
				margin-bottom: 10px;
				padding-top: 5px;
				padding-bottom: 5px;
				border-radius: 6px;
				box-shadow: 2px 2px 4px #eaeaea;

				.left_title {
					font-size: 20px;
					font-weight: 600;
					position: relative;
					left: 8px;
				}

				.right_day {
					font-size: 22px;
					font-weight: 600;
					color: #6b6ba1;
					position: relative;
					right: 8px;
				}
			}
		}

		.self {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;

			.title {
				width: 80%;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 20px;

				button {
					width: 100%;
					font-size: 20px;
					font-weight: 600;
					color: #8282c3;
					background-color: #ffffff;
					border-radius: 5px;

					uni-icons {
						position: relative;
						right: 5px;
					}

					text {
						position: relative;
						left: 5px;
					}
				}
			}
		}

		uni-drawer {
			opacity: 0.9;

			.drawer_title {
				width: 100%;
				text-align: center;
				padding-top: 20px;
				font-size: 18px;
				letter-spacing: 2px;
				font-weight: 600;
			}

			.drawer_form {
				margin-top: 15px;
				width: 90%;
				margin-left: auto;
				margin-right: auto;

				.content {
					margin-top: 20px;
					color: #2c2c2c;

					.jinain_day {
						.picker {
							margin-top: 20px;
						}

						.btn_memory {
							margin-top: 20px;

							button {
								width: 100%;
								border-radius: 5px;
								font-size: 16px;
								letter-spacing: 3px;
								background-color: #8282c3;
								color: #ffffff;
							}
						}
					}

					.daoshu_day {
						.picker {
							margin-top: 20px;
						}

						.btn_daoshu {
							margin-top: 20px;

							button {
								width: 100%;
								border-radius: 5px;
								font-size: 16px;
								letter-spacing: 3px;
								background-color: #8282c3;
								color: #ffffff;
							}
						}
					}
				}
			}
		}
	}
</style>
